/**
 * 目标1：默认显示-北京市天气* */
function getWeather(cityCode) {
    myAxios({
        url: "http://hmajax.itheima.net/api/weather",
        params: {
            city: cityCode,
        }
    }).then(result => {
        // console.log(result.data);
        const { area, date, dateLunar, dateShort, dayForecast, psPm25
            , psPm25Level, temperature, todayWeather, weather, weatherImg, windDirection,
            windPower
        } = result.data;
        //城市
        document.querySelector('.location').innerHTML = `
          <img src="./imgs/定位.png" alt="">
        <span class="area">${area}</span>`
        //农历
        document.querySelector('.title').innerHTML =
            `<span class="dateShort">${date}</span>
            <span class="calendar">农历&nbsp;
                <span class="dateLunar">${dateLunar}</span>
            </span>`
        //下栏1
        document.querySelector('.weather-box').innerHTML =
            `<div class="tem-box">
            <span class="temp">
              <span class="temperature">${temperature}</span>
              <span>°</span>
            </span>
          </div>
          <div class="climate-box">
            <div class="air">
              <span class="psPm25">${psPm25}</span>
              <span class="psPm25Level">${psPm25Level}</span>
            </div>
            <ul class="weather-list">
              <li>
                <img src="${weatherImg}" class="weatherImg" alt="">
                <span class="weather">${weather}</span>
              </li>
              <li class="windDirection">${windDirection}</li>
              <li class="windPower">${windPower}</li>
            </ul>
          </div>`
        //下栏2
        document.querySelector('.today-weather').innerHTML = `
        <div class="range-box">
        <span>今天：</span>
        <span class="range">
          <span class="weather">${todayWeather.weather}</span>
          <span class="temNight">${todayWeather.temNight}</span>
          <span>-</span>
          <span class="temDay">${todayWeather.temDay}</span>
          <span>℃</span>
        </span>
      </div>
      <ul class="sun-list">
        <li>
          <span>紫外线</span>
          <span class="ultraviolet">${todayWeather.ultraviolet}</span>
        </li>
        <li>
          <span>湿度</span>
          <span class="humidity">${todayWeather.humidity}</span>%
        </li>
        <li>
          <span>日出</span>
          <span class="sunriseTime">${todayWeather.sunriseTime}</span>
        </li>
        <li>
          <span>日落</span>
          <span class="sunsetTime">${todayWeather.sunsetTime}</span>
        </li>
      </ul>`
        //天气详细
        document.querySelector('.week-wrap').innerHTML = dayForecast.map(items => {
            return `<li class="item">
            <div class="date-box">
              <span class="dateFormat">${items.dateFormat}</span>
              <span class="date">${items.date}</span>
            </div>
            <img src="${items.weatherImg}" alt="" class="weatherImg">
            <span class="weather">${items.weather}</span>
            <div class="temp">
              <span class="temNight">${items.temNight}</span>-
              <span class="temDay">${items.temDay}</span>
              <span>℃</span>
            </div>
            <div class="wind">
              <span class="windDirection">${items.windDirection}</span>
              <span class="windPower">${items.windPower}</span>
            </div>
          </li>`
        }).join('')

    })


}
getWeather('110100');
//搜索框
document.querySelector('.search-city').addEventListener('input', (e) => {
    // e.target.value
    // console.log(document.querySelector('.search-city').value);等于上面的
    myAxios({
        url: "http://hmajax.itheima.net/api/weather/city",
        params: {
            city: document.querySelector('.search-city').value,
        }
    }).then(result => {
        document.querySelector('.search-list').innerHTML = result.data.map(items => {
            return `<li  class="city-item" data-id=${items.code}>${items.name}</li>`
        }).join('')
    })
})
//搜索框li点击
document.querySelector('.search-list').addEventListener('click', e => {
    if (e.target.classList.contains('city-item')) {
        let urcode = e.target.dataset.id;
        console.log(urcode);
        getWeather(urcode);
    }
})








